<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="/css/login.css">

</head>
<body>
<form method="post" action="/user/register">
    <div class="regist">
        <div class="regist_center">
            <div class="regist_top">
                <div class="left fl">会员注册</div>
                <div class="right fr"><a href="/page/index" target="_self">快乐购商城</a></div>
                <div class="clear"></div>
                <div class="xian center"></div>
            </div>
            <div class="regist_main center">

                <div class="username">
                    <div class="left fl">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;
                        <input id="verifyEmail" class="shurukuang" type="email" name="email" placeholder="请填写邮箱地址"/>
                        <span id="check_email">请输入你的邮箱</span>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input id="username" class="shurukuang"
                                                                                     type="text" name="username"
                                                                                     placeholder="请输入你的用户名"/><span
                        id="check_username">请输入你的用户名</span></div>
                <div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input
                        class="shurukuang" id="password" type="password" name="password" placeholder="请输入你的密码"/><span
                        id="check_password">请输入6位以上字符</span></div>
                <div class="username">确认密码:&nbsp;&nbsp;<input class="shurukuang" id="confirm_password" type="password" name="repassword"
                                                              placeholder="请确认你的密码"/><span id="check_confirm_password">两次密码要输入一致哦</span></div>
                <div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="shurukuang" type="text" id="phone"
                                                                                     name="phone"
                                                                                     placeholder="请填写正确的手机号"/><span id="check_phone">填写下手机号吧，方便我们联系您！</span>
                </div>

            </div>
            <div class="regist_submit">
                <input class="submit" type="submit" name="submit" onclick="return checkForm();" value="立即注册">
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src='/js/jquery-3.3.1.js'></script>
<script type="application/javascript">

    $(document).ready(function () {
        // 检验邮箱是否存在
        $('#verifyEmail').on('blur', function (e) {
            var email = document.getElementById("verifyEmail").value;
            if (email == '' || email == ' ') {
                $('#check_email').html("");
                $('#check_email').html("邮箱不能为空").css("color", "red");
                return false;
            }
            // alert(email);
            $.ajax({
                url: "/user/verifyEmail?checkEmail=" + email,
                success: function (result) {
                    if (result == true) {
                        $('#check_email').html("");
                        $('#check_email').html("邮箱填写正确").css("color", "green");
                        return true;
                    }
                    // 不可以注册提示
                    $('#check_email').html("");
                    $('#check_email').html("邮箱已经被注册").css("color", "red");
                    $('#verifyEmail').val("");
                    return false;
                }
            });
        });

        // 检测用户名
        $('#username').on('blur', function (e) {
            var username = document.getElementById("username").value;
            if (username == ' ' || username == '') {
                $('#check_username').html("");
                $('#check_username').html("用户名不能为空").css("color", "red");
                return false;
            }
            $('#check_username').html("");
            $('#check_username').html("用户名填写正确").css("color", "green");
            return true;
        });

        // 检测密码
        var password
        $('#password').on('blur', function (e) {
            password = document.getElementById("password").value;
            if (password == ' ' || password == '') {
                $('#check_password').html("");
                $('#check_password').html("密码不能为空").css("color", "red");
                return false;
            }
            if (password.length < 6 || password.length > 16){
                $('#check_password').html("");
                $('#check_password').html("密码长度应在6-16位之间").css("color", "red");
                return false;
            }
                $('#check_password').html("");
            $('#check_password').html("密码填写正确").css("color", "green");
            return true;
        });

        // 确认密码
        $('#confirm_password').on('blur', function (e) {
            var confirm_password = document.getElementById("confirm_password").value;
            if (confirm_password != password || confirm_password == '' || confirm_password == ' ') {
                $('#check_confirm_password').html("");
                $('#check_confirm_password').html("两次密码输入不一致").css("color", "red");
                return false;
            }
            $('#check_confirm_password').html("");
            $('#check_confirm_password').html("确认成功").css("color", "green");
            return true;

        });

        // 手机号
        $('#phone').on('blur', function (e) {
            var phone = document.getElementById("phone").value;
            var reg=/^1\d{10}$/;
            if(phone =='' || phone == ' ' || !reg.exec(phone)) {
                $('#check_phone').html("");
                $('#check_phone').html("手机号输入有误").css("color", "red");
                return false;
            }
            $('#check_phone').html("");
            $('#check_phone').html("手机号输入成功").css("color", "green");
            return true;
        });

    });


</script>

</body>
</html>